<template>
  <div class="grid">
    <div
      v-for="(room, index) in roomstatus"
      :key="index"
      class="grid-item"
      :style="{ backgroundColor: getBackgroundColor(room.status) }"
    >
      <p style="font-weight: bold;">{{ room.roomnumber }} - {{ room.roomtype }}</p><br>
      <p v-if="room.fullname" style="font-weight: bold;">{{ room.fullname }}</p><br>
      <p style="font-weight: bold;">{{ room.status }}中</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      roomstatus: []
    };
  },
  mounted() {
    if (!localStorage.getItem('users')) {
      this.$router.push("/");
      this.$message({
        message: '用户未登录！非法操作！',
        type: 'error'
      });
    }
    // 获取房间信息
    axios.get('http://localhost:8888/roomstatus/get')
      .then(response => {
        this.roomstatus = response.data;
      }).catch(error => {
        console.error(error);
      });
  },
  methods: {
    getBackgroundColor(status) {
      if (status === '空闲') {
        return '#67C23A';
      } else if (status === '入住') {
        return '#F56C6C';
      } else if (status === '清洁') {
        return '#E6A23C';
      } else {
        return 'gray'; // 默认背景颜色
      }
    }
  }
};
</script>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.grid-item {
  height: 130px;
  padding: 10px;
  color: white;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.grid-item p {
  margin: 0;
}
</style>